<template>
  <view class="outer-box" v-else>
    <!-- 包含用户头像和昵称的盒子 -->
    <view class="top-box">
      <image :src="userInfo.avatarUrl" class="avatar"></image>
      <view class="nickName">{{userInfo.nickName}}</view>
    </view>
    <!-- 面板区域 -->
    <view class="panel-list">
      <!-- 第一个面板 -->
      <view class="panel">
        <view class="panel-body">
          <view class="items1">
            <view>8</view>
            <view>收藏的店铺</view>
          </view>
          <view class="items1">
            <view>14</view>
            <view>收藏的商品</view>
          </view>
          <view class="items1">
            <view>18</view>
            <view>关注的商品</view>
          </view>
          <view class="items1">
            <view>84</view>
            <view>足迹</view>
          </view>
        </view>
      </view>
      <!-- 第二个面板 -->
      <view class="panel">
        <view class="panel-header">
          我的订单
        </view>
        <view class="panel-body">
          <view class="items1">
            <image src="/static/my-icons/icon1.png" class="my-icon"></image>
            <view>待付款</view>
          </view>
          <view class="items1">
            <image src="/static/my-icons/icon2.png" class="my-icon"></image>
            <view>待收货</view>
          </view>
          <view class="items1">
            <image src="/static/my-icons/icon3.png" class="my-icon"></image>
            <view>退款/退货</view>
          </view>
          <view class="items1">
            <image src="/static/my-icons/icon4.png" class="my-icon"></image>
            <view>全部订单</view>
          </view>
        </view>
      </view>
      <!-- 第三个面板 -->
      <view class="panel">
        <view class="panel-header panel-header-only">
          <text>收货地址</text>
          <uni-icons type="arrowright" size="16"></uni-icons>
        </view>
        <view class="panel-header panel-header-only">
          <text>联系客服</text>
          <uni-icons type="arrowright" size="16"></uni-icons>
        </view>
        <view class="panel-header panel-header-only" @click="logout">
          <text>退出登录</text>
          <uni-icons type="arrowright" size="16"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { mapMutations } from 'vuex'

  export default {
    props: {
      userInfo: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {}
    },
    methods: {
      ...mapMutations(['updateUserInfo', 'updateToken']),
      // 退出登录
      async logout() {
        const res = await uni.showModal({
          title: '提示',
          content: '确定退出登录吗？'
        }).catch(err => err)

        // 用户确认退出登录
        if (res.length === 2 && res[1].confirm) {
          // 清空本地存储中的 userinfo 和 token
          uni.removeStorageSync('userinfo')
          uni.removeStorageSync('token')
          // 清空 Store 中的 userInfo 和 token
          this.updateUserInfo({})
          this.updateToken('')
        }
      }
    }
  }
</script>

<style lang="scss">
  .outer-box {
    height: 100%;
    background-color: #F4F4F3;
  }

  .top-box {
    height: 400rpx;
    background-color: #C00000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .avatar {
      display: block;
      width: 90px;
      height: 90px;
      border-radius: 50%;
      border: 2px solid #FFFFFF;
      box-shadow: 0 1px 5px black;
    }

    .nickName {
      color: #FFFFFF;
      font-size: 16px;
      margin-top: 10px;
      font-weight: bold;
    }
  }

  .panel-list {
    position: relative;
    top: -20px;

    .panel {
      background-color: #FFFFFF;
      border-radius: 3px;
      margin: 5px 10px;

      .panel-header {
        line-height: 40px;
        border-bottom: 1px solid #F8F8F8;
        font-size: 14px;
        padding-left: 10px;
      }

      .panel-body {
        display: flex;
        justify-content: space-around;
      }
    }
  }

  .items1 {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    align-items: center;
    margin: 10px 0;
  }

  .my-icon {
    display: block;
    width: 37px;
    height: 37px;
  }

  .panel-header-only {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 10px;
  }
</style>
